<template>
	<view class="min100 bg plr-20 gray-2 ptb-40">
		<view class="flex radius-45 mb-20" style="background:#fff">
			<view :class="['radius-34','midItem',midIndex == 0 ? 'midActive' : '']" @click="changeMid(0)">藏品</view>
			<view :class="['radius-34','midItem',midIndex==1?'midActive':'']" @click="changeMid(1)">盲盒</view>
		</view>
		<u-tabs font-size="26" class="mb-20" active-color="#3F3F3F" inactive-color="#7F7F7F" bg-color="transparent"
			:list="tabs" :is-scroll="true" :current="current" @change="change"></u-tabs>

		<empty v-if="list.length==0"></empty>
		<view class="" v-else>
			<view class="mb-20 radius-10 plr-20 ptb-20" style="background-color: #fff;" v-for="(item,index) in list"
				:key="index" @tap.stop="toDetailds(item)">
				<view class="flex flex-start flex-top">
					<image :src="item.image" class="itemImg mr-20 radius-20" mode="aspectFill"></image>
					<view style="flex: 1;" class="white">
						<view class="size-30 mt-10 mb-30 flex flex-between">
							<text style="color: #333333; font-size: 38rpx;">{{item.name}}</text>
							<text class="blue"
								:class="{'blue':item.status == 0,'yellow':item.status == 1,'grey-d7':item.status == 2}">
								{{ item.status == 0 ? '待付款' : item.status == 1 ? '已付款': item.status == 'sold' ? '已出售' : '已取消' }}
							</text>
						</view>
						<view class="flex flex-between">
							<!-- <text style="color: #B8B8B8; font-size: 36rpx;">x1</text> -->
							<view class="">
								<view style="color: #000; font-size: 36rpx;" v-if="item.number_f">
									#{{item.number_f}}/{{item.stock}}</view>
							</view>
							<view class="size-34 gold" style="color: #797979; font-size: 38rpx;">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex mt-20 btnWrap">
					<view class="size-24" style="color: #7c7c7c" :class="{'color-9':item.status != 0}">
						{{ item.status != 0 ? '下单时间：' : '' }}{{ item.status != 0 ? item.create_time : '' }}
					</view>
					<view class="flex1 flex-middle">
						<u-button @click="cancelOrder(item.id)" round class="saleBtn saleBtns" v-if="item.status == 0">
							取消订单</u-button>
						<u-button v-if="item.status == 0" class="saleBtn" @click="payOrder(item.order_id)">去支付
						</u-button>
					</view>
				</view>
			</view>
			<!-- <view class="mb-20 radius-10 plr-20 ptb-20" style="background-color: #fff;" v-for="(item,index) in list" :key="index">
				<view class="flex mb-20">
					<view class="white size-28">订单编号：{{item.order_num}}</view>
					<view class="size-24 f-bold" :class="{'blue':item.status == 0,'yellow':item.status == 1,'grey-d7':item.status == 2}">{{ item.status == 0 ? '待付款' : item.status == 1 ? '已付款' : '已取消' }}</view>
				</view>
				<view class="flex flex-start flex-top">
					<image :src="item.image" class="itemImg mr-20 radius-20" mode="aspectFill"></image>
					<view style="flex: 1;" class="white">
						<view class="size-30 mt-10 mb-30">{{item.name}}</view>
						<view class="flex flex-between">
							<view class="size-34 gold">
								￥{{item.price}}
							</view>
						</view>
						
					</view>
				</view>
				<view class="flex mt-20 btnWrap">
					<view class="size-24" style="color: #7c7c7c" :class="{'color-9':item.status != 0}">{{ item.status != 0 ? '下单时间：' : '' }}{{ item.status != 0 ? item.create_time : '' }}</view>
					<view class="flex1 flex-middle">
						<u-button @click="cancelOrder(item.id)" round class="saleBtn saleBtns" v-if="item.status == 0">取消订单</u-button>
						<u-button v-if="item.status == 0" class="saleBtn" @click="payOrder(item.order_id)">去支付</u-button>
					</view>
					
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				midIndex: 0,
				tabs: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '已付款'
				}, {
					name: '已取消'
				}, {
					name: '已出售'
				}],
				current: 0,
				page: 1,
				pagesize: 10,
				status: "",
				loadStatus: 'loadmore',
				list: []
			}
		},
		onShow() {
			this.init();
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.init()
		},
		onReachBottom() {
			//避免多次触发
			if (this.loadStatus == 'loading' || this.loadStatus == 'nomore') {
				return;
			}
			this.init()
		},
		methods: {
			toDetailds(item) {
				uni.navigateTo({
					url: '/pages/my/orderDetails?order_id=' + item.order_id + '&status=' + item.status +
						'&midIndex=' + this.midIndex
				})
			},
			// 取消订单
			cancelOrder(id) {
				let _this = this;
				if (this.midIndex == 0) {
					// 藏品
					uni.showModal({
						title: '提示',
						content: '确定取消订单?',
						confirmColor: '#EFE0C0',
						success: function(res) {
							if (res.confirm) {
								_this.$http('api/orders/cancelGoodsOrder', {
									id: id
								}, 'POST').then(res => {
									_this.list = [];
									_this.page = 1;
									_this.current = 3;
									_this.status = 2;
									_this.init();
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "取消操作!",
									icon: "none"
								})
							}
						}
					});
				} else {
					// 盲盒
					uni.showModal({
						title: '提示',
						content: '确定取消订单?',
						confirmColor: '#EFE0C0',
						success: function(res) {
							if (res.confirm) {
								_this.$http('api/orders/cancelBoxOrder', {
									id: id
								}, 'POST').then(res => {
									_this.list = [];
									_this.page = 1;
									_this.current = 3;
									_this.status = 2;
									_this.init();
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "取消操作!",
									icon: "none"
								})
							}
						}
					});
				}

			},
			// 去支付
			payOrder(order_id) {
				if (this.midIndex == 0) {
					//藏品
					uni.navigateTo({
						url: '../pay/collectPay?order_id=' + order_id
					})
				} else {
					// 盲盒
					uni.navigateTo({
						url: '../pay/boxPay?order_id=' + order_id
					})
				}
			},
			// 选择是版权品还是盲盒
			changeMid(index) {

				this.midIndex = index;
				this.list = [];
				this.page = 1;
				this.init();
			},
			goDetails(item) {
				uni.navigateTo({
					url: "./orderDetails"
				})
			},
			init() {
				if (this.midIndex == 0) {
					//藏品
					this.$http('api/orders/goodsOrderList', {
						page: this.page,
						pagesize: 10,
						status: this.status
					}).then(res => {
						let data = res.data
						if (this.list >= res.count) {
							this.loadStatus = "nomore"
						} else {
							this.page = this.page + 1
							this.loadStatus = "loadmore"
						}
						this.list = this.list.concat(data)
						this.list.map(item => {
							if (this.status == 'sold') {
								this.$set(item, 'status', 'sold')
							}
						})
						uni.stopPullDownRefresh();
					})
				} else {
					// 盲盒
					this.$http('api/orders/boxOrderList', {
						page: this.page,
						pagesize: 10,
						status: this.status
					}).then(res => {
						let data = res.data
						if (this.list >= res.count) {
							this.loadStatus = "nomore"
						} else {
							this.page = this.page + 1
							this.loadStatus = "loadmore"
						}
						this.list = this.list.concat(data)
						uni.stopPullDownRefresh();
					})
				}
			},
			change(index) {
				this.current = index;
				if (index == 0) {
					this.status = '';
				} else if (index == 4) {
					this.status = 'sold';
				} else {
					this.status = Number(index - 1);
				}
				this.list = [];
				this.page = 1;
				this.init();
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f5f5f5;
	}

	.white {
		color: #3c3c3c;
	}

	.gold {
		color: #9c8b66;
	}

	.itemImg {
		width: 168rpx;
		height: 168rpx;
	}

	.btnWrap {
		/deep/ uni-button {
			// height: 60rpx !important;
			// padding: 0 30rpx !important;
			// font-size: 22rpx;
		}

		.transferBtn {
			background: #EFE0C0;
		}

		.saleBtn {
			width: 140rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 56rpx;
			margin: 0;
			padding: 0;
			height: 56rpx !important;
			background: linear-gradient(90deg, #EEA634, #DE2D32);
			border-radius: 28rpx;

			&::after {
				border: none;
			}
		}

		.saleBtns {
			margin-right: 30rpx;
		}
	}

	.midItem {
		color: #7c7c7c;
		font-size: 32rpx;
		text-align: center;
		// width: 330rpx;
		width: 50%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
	}

	.midActive {
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		color: #fff;
		font-weight: bold;
	}

	/deep/ .u-tab-bar {

		background: linear-gradient(90deg, #34D1F9 0%, #37DC6D 98%);
	}

	.blue {
		color: #D7B92E;
		background: linear-gradient(0deg, #A776F7 0%, #6990F7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.yellow {
		color: #D7B92E;
		background: linear-gradient(0deg, #FED05E 0%, #EDAFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.red {
		color: #EA232C;
	}

	.grey-d7 {
		color: #d7d7d7;
	}

	/deep/ .u-tabs-scorll-flex {
		justify-content: space-around;
	}

	/deep/ .u-tabs .u-tab-item {
		margin-right: 32rpx;
		height: 30px !important;
		line-height: 30px !important;
		padding: 0 20px;
		background: #FFFFFF;
		border-radius: 15px;
		width: max-content !important;
		flex: unset !important;
	}

	/deep/ .u-tab-bar {
		display: none;
	}
</style>
